<style lang="less">
.card_style {
  height: 100%;
  width: 100%;
  overflow: hidden;
  .ivu-card-body {
    padding: 0px;
  }
}
.page_style {
  margin-top: 10px;
  text-align: center;
}
.bench_search {
  margin-bottom: 10px;
}
.nopadding .ivu-table-cell {
  padding: 0px 0px;
}
.item1{
  height: 42px;
  line-height: 40px;
}
.marginR2 {
  margin-right: 2%;
}
.fontsize20 {
  font-size: 20px;
}
.fontTitle {
  font-size: 20px;
  height: 52px;
  text-align: right;
  padding-top: 16px;
  // vertical-align: bottom;
}
.fontContent {
  font-size: 20px;
  height: 52px;
  text-align: left;
  padding-top: 16px;
  color: #dc9387;
  // vertical-align: bottom;
}
.countNum {
  font-size: 35px;
  color: #dc9387;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
.new-btn-sty1 {
  margin-right: 5px;
  color: #fff;
  background-color: #598ED1;
  border-color: #598ED1;
  font-weight: 500;
}
.text-overflow{
  width:300px; /* 超过宽度就显示... */
  text-overflow: ellipsis; /* 显示... */
  overflow: hidden; /* 隐藏文字 */
  white-space: nowrap; /* 不换行 */
  cursor: pointer; /* hover显示手形 */
}
</style>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <div>
      <Row class="bench_search">
        <Col span="4">
          <span>区县：</span>
          <Select v-model="searchInfo.level1" filterable transfer="" @on-change="getMailList(searchInfo.level1,1,null)" style="width: 70%;">
            <Option :value="item.id" v-for="item in mailList[0]" v-bind:key="item.id">{{item.title}}</Option>
          </Select>
        </Col>
        <Col span="4">
          <span>街道：</span>
          <Select v-model="searchInfo.level2" filterable transfer="" @on-change="getMailList(searchInfo.level2,2,null)" style="width: 70%;">
            <Option :value="item.id" v-for="item in mailList[1]" v-bind:key="item.id">{{item.title}}</Option>
          </Select>
        </Col>
        <Col span="6">
          <span>社&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区：</span>
          <Select v-model="searchInfo.level3" filterable transfer="" style="width: 70%;">
            <Option :value="item.id" v-for="item in mailList[2]" v-bind:key="item.id">{{item.title}}</Option>
          </Select>
        </Col>
        <Col span="6">
          <span>时间范围：</span>
          <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer="" style="width: 70%"
                      placement="bottom-end" v-model="searchInfo.applytime"></DatePicker>
        </Col>
        <Col span="2" class="marginR2" style="float:right" pull="1">
          <Button class="new-btn-sty" @click="searchDatawork"><Icon type="ios-search" /> 查询统计</Button>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="6" >
          <span>事项类型：</span>
          <Select v-model="searchInfo.item_type" filterable transfer="" style="width: 70%;" @on-change="changeItem1(searchInfo.item_type)">
            <Option :value="item.id" v-for="item in treelist" v-bind:key="item.id">{{item.type_name}}</Option>
          </Select>
        </Col>
        <Col span="6">
          <span>事项名称：</span>
          <Select v-model="searchInfo.item_id" filterable transfer="" style="width: 70%;">
            <Option :value="item.id" v-for="item in eventListSQ" v-bind:key="item.id">{{item.text}}</Option>
          </Select>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <Table  :columns="columnswork" :data="datalistwork"  stripe style="margin-top:10px"></Table>
          <Row v-if="searchInfo.loading1 == true">
            <Col class="demo-spin-col" span="8" offset="8">
              <Spin fix>
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>数据正在加载</div>
              </Spin>
            </Col>
          </Row>
        </Col>
        <Col span="12">
          <Card style="margin-top: 10px;margin-left: 10px">
            <avg-approval-time-echart :width="echartWidth" :height="400" ref="echart1"></avg-approval-time-echart>
          </Card>
          <Page :total="searchInfo.totalnum" class="page_style" :current="searchInfo.currentPageNo"
                :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total show-elevator show-sizer @on-page-size-change="changePagesize"/>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { date2str, eventlist, getMailLevelList, getApprovalTimeList, treelist } from '@/api/eventlist'
import AvgApprovalTimeEchart from '../compoments/avg-approval-time-echart'
export default {
  components: {
    AvgApprovalTimeEchart
  },
  data () {
    return {
      datalistwork: [],
      treelist: [],
      eventListSC: [],
      eventListSQ: [],
      echartWidth: (document.documentElement.clientWidth - 300) / 2,
      searchInfo: {
        currentPageNo: 1,
        currentPageSize: 10,
        level1: 0,
        level2: 0,
        level3: 0,
        loading1: true,
        loading2: true,
        loading3: true,
        loading4: true,
        applytime: [],
        tab_index: 0,
        // tab1页面内图表转换控制 true为表 false为图
        shape: true,
        tab5Pie1: true,
        tab5Bar2: true,
        item_id: '',
        item_id2: '',
        workType: '1',
        ishavezzz: 0,
        orderstateList: []
      },
      mailList: [[], [], []],
      columnswork: [
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '行政区',
          key: 'city',
          width: 186,
          align: 'center'
        },
        { title: '街道', key: 'street', width: 186, align: 'center', sortable: true },
        { title: '社区', key: 'community', width: 187, align: 'center', sortable: true },
        { title: '平均审批时间', key: 'time', width: 186, align: 'center', sortable: true }
      ]
    }
  },
  methods: {
    init () {
      this.searchInfo.loading1 = true
      this.datalistwork = []
      this.$refs.echart1.chart([])
      let parasm = {
        'item_id': this.searchInfo.item_id,
        'yg_name': this.searchInfo.yg_name,
        'start_time': date2str(this.searchInfo.applytime[0]),
        'end_time': date2str(this.searchInfo.applytime[1]),
        'pageNo': this.searchInfo.currentPageNo,
        'pageSize': this.searchInfo.currentPageSize,
        'id': this.searchInfo.level3 || this.searchInfo.level2 || this.searchInfo.level1 || ''
      }
      getApprovalTimeList(parasm).then(ret => {
        if (ret.data.errcode === 0) {
          this.searchInfo.totalnum = ret.data.data.totalRecord
          let data = []
          ret.data.data.results.forEach(function (temp, index) {
            let day = parseInt(temp.avgtime / 60 / 60 / 24)
            let hr = parseInt(temp.avgtime / 60 / 60 % 24)
            let min = parseInt(temp.avgtime / 60 % 60)
            let sec = parseInt(temp.avgtime % 60)
            day = day > 9 ? day : '0' + day
            hr = hr > 9 ? hr : '0' + hr
            min = min > 9 ? min : '0' + min
            sec = sec > 9 ? sec : '0' + sec
            temp['time'] = day + '天' + hr + '时' + min + '分' + sec + '秒'
            temp['avgtime'] = Math.round(temp.avgtime / 60)
            data.push(temp)
          })
          this.datalistwork = data
          this.searchInfo.loading1 = false
          this.$refs.echart1.chart(data)
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    searchDatawork () {
      this.init()
    },
    changePagesize (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.searchInfo.currentPageNo = pageNo
      this.init()
    },
    changeItem1 (item_type) {
      let that = this
      that.eventListSQ = []
      that.eventListSC.forEach(function (temp1, index) {
        if (temp1.org_code === item_type) {
          that.eventListSQ.push(temp1)
        }
      })
      that.eventListSQ.unshift({ id: 0, text: '全部' })
    },
    // 事项类型列表，页面搜索栏使用
    getTreeList () {
      treelist({}).then(res => {
        if (res.data.errcode === 0) {
          this.treelist = res.data.data
          this.treelist.unshift({ id: '', type_name: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询事项类型列表失败' })
        }
      })
    },
    // 已有事项列表，页面搜索栏使用
    getItemList () {
      eventlist({}).then(res => {
        if (res.data.errcode === 0) {
          this.eventListSC = res.data.data
          this.eventListSC.unshift({ id: 0, text: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询事项劣列表失败' })
        }
      })
    },
    // 社区统计下拉搜索框的级联查询
    getMailList (id, index, company_code) {
      if (id === 0) {
        this.mailList[index] = this.mailList[index + 'all']
        this.searchInfo['level' + (index + 1)] = 0
        return
      }
      this.searchInfo['level' + (index + 1)] = 0
      getMailLevelList({ id: id, company_code: company_code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[index] = res.data.data
          this.mailList[index].unshift({ id: 0, title: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    // 社区统计下拉搜索框的级联查询
    getMailAllList (index) {
      getMailLevelList({ level: index + 2 }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[(index) + 'all'] = res.data.data
          this.mailList[(index) + 'all'].unshift({ id: 0, title: '全部' })
          this.mailList[index] = this.mailList[index + 'all']
          this.searchInfo['level' + (index + 1)] = 0
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    }
  },
  mounted () {
    this.getMailAllList(1)
    this.getMailAllList(2)
    this.getMailAllList(0)
    this.getItemList()
    this.getTreeList()
    this.init()
  }
}
</script>
